<template>
    <div class="wrapper" @click="cateShow = !cateShow">
        <filter-report :visible=true :cateShow="cateShow" :type="0" ></filter-report>
        
        <highcharts :options="charts" v-if="isShowTime" style="width: 100%;margin-top:40px;"></highcharts>
    </div>
</template>

<script>
    import Vue from 'vue'
    import {mapGetters} from 'vuex'
    import FilterReport from '~components/filterReport.vue'
    import { getTime,getDate,getYesterday,getSevenDaysBefore } from '~/utils/auth'
    import { REPORT_ADD_DATA } from '../../store/mutation-types/report/index';
    import { Radio, RadioGroup, RadioButton, Table, TableColumn} from 'element-ui'
    import VueHighcharts from 'vue-highcharts';
    import Highcharts from 'highcharts/highcharts';

    Vue.use(VueHighcharts, { Highcharts });
    Vue.use(Radio);
    Vue.use(RadioGroup);
    Vue.use(RadioButton);
    Vue.use(Table);
    Vue.use(TableColumn);


    export default {
        components: {
            FilterReport
        },
        head(){
            return {
                title: "新增客户统计",
                meta: [
                    { hid: 'reportadd', name: 'reportadd', content: 'reportadd'}
                ]
            }
        },
        data () {
            return {
                tabName: '新增客户统计',
                showType: '0',
                isShowTime: false,
                cateShow: false,
                
                charts:{
                    chart: {
                        type: 'line' //类型
                    },
                    title: {
                        text: '新增客户统计'
                    },
                    subtitle: {
                        text: ''
                    },
                    xAxis: {
                    },
                    yAxis: {
                        title: {
                            text: '客户数'
                        }
                    },
                    credits: false,     //去除右下角highcharts链接
                    legend: {           //图例
                        layout: 'vertical',
                        align: 'right',
                        x: 0,
                        verticalAlign: 'top',
                        y: 150,
                        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
                    },
                    plotOptions: {
                        series: {
                            borderWidth: 0,
                            dataLabels: {
                                enabled: true,
                                format: '{point.y}'
                            }
                        }
                    },
                    tooltip: {
                        pointFormat: '<span style="color:{point.color}">添加:</span>: <b>{point.y}</b><br/>'
                    },
                    series: [{
                        colorByPoint: false,
                        name:"类别",
                        data: []
                    }]
                },
                chartData : [],
                categories : [],
                filter : {
                    startDate:"",
                    endDate:"",
                    customerlevel: '',//客户类型
                    deptId: '',
                    usId:''
                }
            }
        },
        computed: {
            ...mapGetters({
                'pageTabsList': 'getPageTabsList'
            })
        },
        methods: {
            getFilterData(data){
                //this.filter.startDate = data.dateRange[0]?getDate(data.dateRange[0]):getSevenDaysBefore(new Date());
                //this.filter.endDate =  data.dateRange[1]?getDate(data.dateRange[1]):getYesterday(new Date());
                this.filter.startDate = data.dateRange[0]?getDate(data.dateRange[0]):getDate(new Date());
                this.filter.endDate =  data.dateRange[1]?getDate(data.dateRange[1]):getDate(new Date());
                this.filter.customerlevel = data.customerlevel;
                this.filter.deptId = data.deptId;
                this.filter.usId = data.usId;
                this.getAddData(this.filter)
            },
            clearAllData() {
                this.chartData = [];    //清除原先存在的数据
                this.categories = [];
                //this.charts.series[0].data = [];
                this.charts.xAxis.categories = [];
            },

            diffType(i,level){
                if(level == "340,341,342" || level == "340,341" || level == "340"){
                    if(i == 0){
                       return '3类（认可价格和服务）';
                    }else if(i == 1){
                        return '4类（7天内付款）';
                    }else if(i == 2){
                        return '5类（24小时内办理）';
                    };
                }else if(level == "340,342"){
                    if(i == 0){
                       return '3类（认可价格和服务）';
                    }else if(i == 1){
                        return '5类（24小时内办理）';
                    }
                }else if(level == "341,342" || level == "341"){
                    if(i == 0){
                       return '4类（7天内付款）';
                    }else if(i == 1){
                        return '5类（24小时内办理）';
                    }
                }else if(level == "342"){
                    return '5类（24小时内办理）';
                }
            },

            getAddData(filter) {
                this.clearAllData();
                let dataList = [];
                let categories = [];
                let timerange = '';
                if(filter.startDate ==filter.endDate){
                    timerange = filter.startDate;
                }else{
                    timerange = filter.startDate + " - " + filter.endDate
                }
                this.charts.subtitle.text = '时间段: ' + timerange;
                this.$store.dispatch('getAddData',filter)
                    .then((response) => {
                    let result = response.data;
                    if (result && result.data && result.data.length>0) {
                        let dataList = [];
                        let categories = [];
                        //x轴排序

                        if(this.filter.startDate != this.filter.endDate){ //不同一天
                            for(let i=0; i<result.data.length; i++){
                                for(let n = 0; n < result.data[i].length; n++){
                                    let day = result.data[i][n].date;
                                    if (categories.indexOf(day) == -1) {
                                        categories.push(day)
                                    }
                                }
                            }
                            categories.sort();
                            //x轴赋值
                            for(let i=0; i<result.data.length; i++){
                                let list = [];
                                let typeName = "";
                                typeName = this.diffType(i,filter.customerlevel);
                                for(let j = 0; j<categories.length;j++){
                                    list.push({name: categories[j] , y : 0});
                                    for(let n = 0; n < result.data[i].length; n++){
                                        //typeName = result.data[i][n].typeName;
                                        
                                        let day = result.data[i][n].date;
                                        if (categories[j] == day) {
                                            list[j] = {name: result.data[i][n].date , y : result.data[i][n].count};
                                        }
                                    }
                                }

                                dataList.push({
                                    colorByPoint: false,
                                    name:typeName,
                                    data: list
                                })
                            }
                            this.charts.series = dataList;
                            this.charts.xAxis.categories = categories;

                        }else{
                            categories = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23];
                            this.charts.xAxis.categories = categories;

                            //x轴赋值
                            for(let i=0; i<result.data.length; i++){
                                let typeName = "";
                                let item = [];
                                typeName = this.diffType(i,filter.customerlevel);
                                
                                if(result.data[i].length == 0){
                                    item = [];
                                }else{
                                    item = [
                                        {
                                            name: 0,
                                            y : result.data[i][0].zero || 0
                                        },{
                                            name: 1,
                                            y : result.data[i][0].one || 0
                                        },{
                                            name: 2,
                                            y : result.data[i][0].two || 0
                                        },{
                                            name: 3,
                                            y : result.data[i][0].three || 0
                                        },{
                                            name: 4,
                                            y : result.data[i][0].four || 0
                                        },{
                                            name: 5,
                                            y : result.data[i][0].five || 0
                                        },{
                                            name: 6,
                                            y : result.data[i][0].six || 0
                                        },{
                                            name: 7,
                                            y : result.data[i][0].seven || 0
                                        },{
                                            name: 8,
                                            y : result.data[i][0].eight || 0
                                        },{
                                            name: 9,
                                            y : result.data[i][0].nine || 0
                                        },{
                                            name: 10,
                                            y : result.data[i][0].ten || 0
                                        },{
                                            name: 11,
                                            y : result.data[i][0].eleven || 0
                                        },{
                                            name: 12,
                                            y : result.data[i][0].twelve || 0
                                        },{
                                            name: 13,
                                            y : result.data[i][0].thirteen || 0
                                        },{
                                            name: 14,
                                            y : result.data[i][0].fourteen || 0
                                        },{
                                            name: 15,
                                            y : result.data[i][0].fifteen || 0
                                        },{
                                            name: 16,
                                            y : result.data[i][0].sixteen || 0
                                        },{
                                            name: 17,
                                            y : result.data[i][0].seventeen || 0
                                        },{
                                            name: 18,
                                            y : result.data[i][0].eighteen || 0
                                        },{
                                            name: 19,
                                            y : result.data[i][0].nineteen || 0
                                        },{
                                            name: 20,
                                            y : result.data[i][0].twenty || 0
                                        },{
                                            name: 21,
                                            y : result.data[i][0].twentyOne || 0
                                        },{
                                            name: 22,
                                            y : result.data[i][0].twentyTwo || 0
                                        },{
                                            name: 23,
                                            y : result.data[i][0].twentyThree || 0
                                        }
                                    ]
                                }
                                
                                dataList.push({
                                    colorByPoint: false,
                                    name:typeName,
                                    data: item
                                })

                            }
                            this.charts.series = dataList;
                            this.charts.xAxis.categories = categories;
                        } 
                    }else{
                        this.charts.subtitle.text = '时间段: ' + filter.startDate + " - " + filter.endDate + " （无数据）";
                        this.charts.series =[
                            {
                                colorByPoint: false,
                                name:"3类（认可价格和服务）",
                                data: []
                            },{
                                colorByPoint: false,
                                name:"4类（7天内付款）",
                                data: []
                            },{
                                colorByPoint: false,
                                name:"5类（24小时内办理）",
                                data: []
                            },
                        ] 
                    }
                });
            }
        },
        mounted () {
            this.isShowTime = true;
        },
        created () {
            //pageTab
            if(process.BROWSER_BUILD) {
                if(this.pageTabsList[this.pageTabsList.length-1].name == 'CRM') {
                    let arr = this.pageTabsList;
                    arr[arr.length-1].name = this.tabName;
                    this.$store.commit('PAGETABSLIST',{data:arr})
                }
            }
        }
    }

</script>

<style scoped lang="scss">
    .wrapper{
        min-height: 500px;
    }
    .button-group {
        position: relative;
        margin: 30px 0;
    }
</style>